* {
    margin: 0;
    padding: 0;
}
.box() {
    display: flex;
    display: -webkit-flex;
}
li {
    list-style: none;
}
.px2rem(@name, @px) {
    @{name}: @px / 75 * 1rem;
}
.padding01(@top) {
    .px2rem(padding-top,@top);
}
.padding02(@bottom) {
    .px2rem(padding-bottom,@bottom);
}
.padding03(@left) {
    .px2rem(padding-left,@left);
}
.padding04(@right) {
    .px2rem(padding-right,@right);
}
header {
    align-items: center;
    .box();
    width: 100%;
    .px2rem(height,98);
    background: linear-gradient(#ef0000,#a70000);
    .px2rem(font-size,50);
    color: #ffffff;
    span {
        display: block;
        flex: 1;
        width: 33.3%;
        img {
            display: block;
            .px2rem(margin-left,25);
        }
    }
    span:nth-child(2) {
        .px2rem(margin-left,70);
    }
}
.title {
    .px2rem(height,90);
    background: #f3f2f2;
    .box();
    align-items: center;
    justify-content: center;
    span {
        .px2rem(font-size,35);
        background: linear-gradient(#e5e5e5,#b5b5b5);
        .px2rem(margin-left,8);
        .px2rem(margin-right,8);
        text-align: center;
        .px2rem(line-height,44);
        .px2rem(height,50);
        .px2rem(width,140);
        border: 1px solid #a6a6a6;
        .px2rem(border-radius,15);
        display: block;
        a {
            font-weight: bold;
            color: #818181;
        }
    }
    span:nth-child(1) {
        background: #747474;
        a {
            color: #FFFFFF;
        }
    }
    span:nth-child(2) {
        a {
            display: block; 
            background-image: url("../img/7-7.png");
            background-repeat:no-repeat ;
            .px2rem(background-position-x,110);
              .px2rem(background-position-y,8);
        }
    }
    span:last-child {  
        a {
            display: block;
           background-image: url("../img/7-8.png");
            background-repeat:no-repeat ;
            .px2rem(background-position-x,110);
              .px2rem(background-position-y,8);
        }
    }
}
.ji {
    color: #1E1E1E;
    .px2rem(font-size,35);
    font-weight: bold;
    .px2rem(margin,10);
    .px2rem(height,30);
}
.data {
    background-size: 5%;
    .box();
    .left {
        width: 26%;
        img {
            display: block;
            width: 100%;
            .px2rem(margin,10);
        }
    }
    .right {
        .px2rem(margin-top,18);
        .px2rem(margin-left,35);
        .top {
            h4,
            p {
                .px2rem(font-size,32);
                font-weight: bold;
            }
            p {
                .px2rem(margin-top,20);
                .px2rem(margin-bottom,20);
            }
        }
        .bom {
            background: url("../img/58.png") no-repeat right center;
        
            span {
                display: block;
                color: #797979;
                a {
                    color: #ff0000;
                }
            }
            span:first-child {
                text-decoration: line-through;
                .px2rem(margin-top,20);
                .px2rem(margin-bottom,20);
            }
        }
    }
}
footer {
    .px2rem(height,98);
    background: #000;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    ul {
        .px2rem(height,98);
        align-items: center; //      justify-content: center;
        justify-content: space-around;
        .box();
        li {
            .box();
            flex-flow: column;
            align-items: center;
            a {
                display: block;
                color: #FFFFFF;
                .px2rem(font-size,30);
            }
        }
        li:first-child {
            img {
                display: block;
                width: 90%;
            }
        }
    }
}